<template>
    <div class="form-container">
        <el-form :rules="rules" class="loginIn-form" ref="login" :model="loginForm" label-width="120px">
            <el-form-item class="form-input input-text" label="邮箱" prop="email">
                <el-input v-model="loginForm.email" placeholder="请输入邮箱"></el-input>
            </el-form-item>
            <el-form-item class="form-input input-pass" label="密码" prop="password">
                <el-input v-model="loginForm.password" placeholder="请输入密码" show-password />
            </el-form-item>
            <el-form-item class="form-button">
                <el-button type="primary" @click="handleLogin">登陆</el-button>
            </el-form-item>
            <div class="extra-content">
                <p>忘记密码？<label @click="forgetPass">立即找回</label></p>
            </div>
        </el-form>
    </div>
</template>

<script lang="ts">
  // @ts-ignore
  import { ref, getCurrentInstance  } from "vue";

  // 数据类型匹配
  interface formConfig {
      email?: string;
      password?: string;
      [propName: string]: unknown;
  }
  interface rulesConfig {
      email?: {
          type?: string,
          required: boolean,
          message: string,
          trigger: string
      }[];
      password?: {
          type?: string,
          required: boolean,
          message: string,
          trigger: string
      }[];
      [propName: string]: unknown;
  }
  export default {
    name: 'LoginForm',
    setup() {
      // 当前实例
      // @ts-ignore
      const { ctx } = getCurrentInstance();

      /*
        data数据
      */
      // 表单数据
      const loginForm = ref<formConfig | null>({
        email: '',
        password: ''
      });
      // 表单验证
      const rules = ref<rulesConfig>({
        email: [
          {
            type: 'email',
            required: true,
            message: '请输入邮箱',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ]
      });


      /*
        methods事件
      */
      // 触发登录方法
      const handleLogin = () => {
        const ref = ctx.$refs['login'];
        if (ref) {
          ref.validate((valid: boolean) => {
            if (valid) {
              console.log(ctx.loginForm);
              alert("登陆成功！");
            } else {
              alert('登录信息不完整！！！');
              return false;
            }
          });
        }
      };
      // 忘记密码
      const forgetPass = () => {
          alert('页面正在开发，敬请期待！');
      }

      return {
        loginForm,
        rules,
        handleLogin,
        forgetPass
      };
    }
  }
</script>

<style scoped lang="scss">
    .form-container{
        width: 100%;

        &::v-deep(.loginIn-form) {
            width: 100%;
            margin-top: 20px;
            background-color: #fff;
            padding: 60px 40px 40px 20px;
            border-radius: 5px;
            box-shadow: 0px 5px 10px #cccc;
            .el-form-item {
                &.form-button {
                    .el-button {
                        width: 100%;
                    }
                }
            }

            .extra-content {
                width: 100%;
                text-align: right;
                font-size: 12px;
                color: #333;

                p {
                    label {
                        color: #409eff;
                        cursor: pointer;
                    }
                }
            }
        }
    }
</style>
